
<template>
  <div>
  <h1 class="page-title"><a href="#/">开发组件库11</a></h1>
  <b-button @click="showAlert" variant="info" class="m-1">
    Show alert with count-down timer
  </b-button>

  <b-alert show>Default Alert</b-alert>

  <b-alert variant="success" show>Success Alert</b-alert>

  <b-alert variant="success" show>Success Alert</b-alert>
  <router-view></router-view>

  <div>
    <b-alert show>Default Alert</b-alert>

    <b-alert variant="success" show>Success Alert</b-alert>

    <b-alert v-model="showDismissibleAlert" variant="danger" dismissible>
      Dismissible Alert!
    </b-alert>

    <b-alert
      :show="dismissCountDown"
      dismissible
      variant="warning"
      @dismissed="dismissCountDown=0"
      @dismiss-count-down="countDownChanged"
    >
      <p>This alert will dismiss after {{ dismissCountDown }} seconds...</p>
      <b-progress
        variant="warning"
        :max="dismissSecs"
        :value="dismissCountDown"
        height="4px"
      ></b-progress>
    </b-alert>

    <b-button @click="showAlert" variant="info" class="m-1">
      Show alert with count-down timer
    </b-button>
    <b-button @click="showDismissibleAlert=true" variant="info" class="m-1">
      Show dismissible alert ({{ showDismissibleAlert ? 'visible' : 'hidden' }})
    </b-button>
  </div>
  </div>
</template>

<style scoped>
  @import './css/index.css';
</style>
